
/*
 * @Author: 肖思汗 
 * @Date: 2025-06-17 11:40:07 
 * @Last Modified by: 肖思汗
 * @Last Modified time: 2025-07-16 09:32:23
 */


import clsx from "clsx";
import { autorun } from "mobx";
import { ReactNode, useEffect, useState } from "react";
import styles from "./fineTuning.module.less";
import fineTuningStore from "./FineTuningStore";
import { Close } from "@nutui/icons-react-taro";
import { NavBar, Popup } from "@nutui/nutui-react-taro";
import designerRender from "../Designer/designerRender";

import upIcon from "./img/up.svg";
import downIcon from "./img/down.svg";

import leftIcon from "./img/left.svg";
import rightIcon from "./img/right.svg";
import utilsStore from "src/utils/utilsStore";
import utils from "src/utils/utils";
import designerStore from "../Designer/designerStore";

import { observer } from "mobx-react-lite";
import leftTopStore from "../LeftTop/leftTopStore";

interface Iprops {
    children?: ReactNode
}

// 微调
const FineTuning = observer((props: Iprops) => {

    if (!Boolean(designerStore.activeObjectId)) {
        fineTuningStore.setShow(false);
    }

    return (
        <div
            className={clsx(
                styles.fineTuning,
                !leftTopStore.showColorPicker &&
                fineTuningStore.show && styles.show
            )}
            style={{
                paddingBottom: utilsStore.safeAreaBottom || utils.rpx2px(20)
            }}
        >
            {
                [
                    {
                        icon: upIcon,
                        text: "上",
                        onclick: () => {
                            console.log("上");
                            designerRender.moveActiveObject(0, -1);
                        }
                    },
                    {
                        icon: downIcon,
                        text: "下",
                        onclick: () => {
                            console.log("下");
                            designerRender.moveActiveObject(0, 1);
                        }
                    },
                    {
                        icon: leftIcon,
                        text: "左",
                        onclick: () => {
                            console.log("左");
                            designerRender.moveActiveObject(-1, 0);
                        }
                    },
                    {
                        icon: rightIcon,
                        text: "右",
                        onclick: () => {
                            console.log("右");
                            designerRender.moveActiveObject(1, 0);
                        }
                    }
                ].map((item) => {
                    return (
                        <div
                            className={styles.btns_Item}
                            onClick={item.onclick}
                        >
                            <img src={item.icon} alt="" className={styles.icon} />
                            <span className={styles.btns_Item_Text} >{item.text}</span>
                        </div>
                    )
                })
            }

            <Close
                className={styles.close}
                onClick={() => {
                    fineTuningStore.setShow(false);
                }}
            />

        </div>
    );
});

export default FineTuning;